<template>
	<view class="container" @pull-down-refresh="onPullDownRefresh">

		<!-- 头部 -->
		<view class="box_top">
			<!-- title -->
			<view class="top_title">
				<view style="position: absolute; left:0" @click="reback()">
					<uni-icons type="left" size="24"></uni-icons>
				</view>
				<view><text>二手房</text></view>
			</view>

			<!-- 搜索栏 -->
			<view class="searchbar">
				<!-- 地址 -->
<!--				<view class="">-->
<!--					<text> {{vuex_city==''?'选择':vuex_city}}</text>-->
<!--				</view>-->

				<!-- 搜索条 -->
				<uni-search-bar placeholder="上高印象二手房" cancel-text="取消" style="padding: 0;" bgColor="#fff"
					@focus="search">
					<!-- <uni-icons slot="searchIcon" color="#999999" size="14" type="home" /> -->
				</uni-search-bar>

				<!-- <u-icon name="scan" color="#2979ff" size="40"  @click="clickScan" style="margin-left: auto;"></u-icon> -->
			</view>
		</view>

		<view class="container">
			<view class="scroll-wrapper">
				<scroll-view class="scroll-content" scroll-x="true">
					<!-- list -->
					<view class="box_item" v-for="(item, index) in items" :style="{'background':item.backcolor}" > 
						<view class="box_font1">
							<text>{{item.title}}</text>
						</view>
						<view class="box_font2">
							<text>{{item.description}}</text>
						</view>
						<view class="box_img2">
							<view class="img2_image">
								<image src="/static/img/my/sce_house1.png" mode=""></image>
							</view>
							<view class="img2_image">
								<image src="/static/img/my/sce_house2.png" mode=""></image>
							</view>
						</view>
					</view>
					<!-- <view class="scroll-item" v-for="(item, index) in items" :key="index"
						:style="{ width: itemWidth + 'px' }">
						<view class="title">{{ item.title }}</view>
						<view class="description">{{ item.description }}</view>
						<view class="image-placeholder">
							<image :src="item.imageSrc" mode="scaleToFill"></image>
						</view>
					</view> -->
				</scroll-view>
			</view>
		</view>

		<!-- 一张图片 -->
		<view class="banner">
			<view class="banner_image">
				<image src="https://fangshijie2025.oss-cn-hangzhou.aliyuncs.com/0ba2784f964448a095e617c1434f9689.png" @load="onImageLoad" @error="onImageError"
					:class="{ 'fade-in': imageLoaded }"></image>
			</view>

		</view>


		<view class="body_list">
			<!-- 筛选栏  fixedTop -->
			<view class="dadropdown-box">
				<DaDropdownVue2 themeColor="#007aff" textColor="#333333" :duration="300"
					:dropdownMenu="dropdownMenuList" @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
				</DaDropdownVue2>
			</view>


			<!-- 房源列表 -->
			<!-- <fangTemplate style="width: 100%;" :res='flowList' :storeName='false' /> -->
			<view class="build_class">
				<view class="list_box" v-for="(item,index) in flowList" @click="navigateToDetailPage(item)">
					<view class="box_left">
						<view class="left_image">
							<image :src="item.faceUrl" mode=""></image>
						</view>

						<view class="owner">
							<view class="owner_image">
								<image src="/static/img/my/sce_house4.png" mode=""></image>
							</view>
							<view class="owner_font1"><text>{{item.ownerName}}</text></view>
							<view class="owner_font2"><text>房市介中介</text></view>
						</view>

					</view>
					<view class="box_right">
						<view class="right_box1">
							<viwe class="box1_type"><text>新售楼盘</text></viwe>
							<view class="box1_name"><text>{{item.title}}</text></view>

						</view>


						<view class="right_box3">
							<view class="box_font"><text>{{item.houseCode}}&nbsp;&nbsp;{{item.villageName}}</text></view>
						</view>

						<view class="right_box2">
							<view class="box2_colorfont"><text
									style="color: red; font-size: 36rpx; font-weight: 600;">179 <text
										style="font-size: 24rpx;">万</text></text> <text
									style="margin-left: 16rpx; font-size: 24rpx; color: rgba(11, 12, 15, 0.4);">11905/m</text>
							</view>
						</view>


					</view>
				</view>

			</view>

		</view>
		<!-- 加载更多提示 -->
		<view v-if="hasMore" class="loading-more">加载更多...</view>
	</view>
</template>

<script>
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'

	import fangTemplate from '@/components/m-goods-list/fangList'
	import {
		findHouseRoomList
	} from "../../api/house";
	import {
		getAddressItemByCode
	} from "../../api/address";

	export default {
		components: {
			fangTemplate,
			DaDropdownVue2
		},
		data() {
			return {
				dropdownMenuList: [{
						title: '区域',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', // 默认内容2
						options: uni.getStorageSync('addressData'),
					},
					{
						title: '均价',
						type: 'cell',
						prop: 'god2',
						showAll: true,
						showIcon: true,
						options: [{
								label: '3000元以下',
								value: '1'
							},
							{
								label: '3000 - 5000元',
								value: '2'
							},
							{
								label: '5000 - 6000元',
								value: '3'
							},
							{
								label: '6000 - 7000元',
								value: '4'
							},
							{
								label: '7000 - 8000元',
								value: '5'
							},
							{
								label: '8000 - 9000元',
								value: '6'
							},
							{
								label: '9000 - 10000元',
								value: '7'
							},
							{
								label: '10000元以上',
								value: '8'
							},
						],
					},
					{
						title: '排序',
						type: 'cell',
						prop: 'god3',
						showAll: true,
						showIcon: true,
						options: [{
								label: '价格升序',
								value: '2'
							},
							{
								label: '价格降序',
								value: '3'
							},
							{
								label: '时间升序',
								value: '2'
							},
							{
								label: '时间降序',
								value: '3'
							},
							// { label: '热度排序', value: '3' },
						],
					},
					{
						title: '日期',
						type: 'daterange',
						prop: 'god4',
						value: {
							start: '',
							end: ''
						},
					},
				],

				filterList: [{
						name: '区域',
						isOpen: false,
						options: ['不限', '上高区', '中心区', '开发区']
					},
					{
						name: '均价',
						isOpen: false,
						options: ['不限', '6000元以下', '6000-7000元', '7000-8000元']
					},
					{
						name: '更多',
						isOpen: false,
						options: ['不限', '新房', '二手房', '商铺']
					},
					{
						name: '排序',
						isOpen: false,
						options: ['默认排序', '价格升序', '价格降序', '热度排序']
					}
				],
				rankData: [{
						name: '龙井湖院1',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院2',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院3',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院4',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院5',
						area: 'xxx地区',
						price: '8000'
					},
					{
						name: '龙井湖院6',
						area: 'xxx地区',
						price: '8000'
					}
				],
				flowList: [],
				houseData: [{
						totalPrice: '90',
						unitPrice: '8000',
						agency: '元兴 xx房产中介',
						tags: ['大户型', '房东急售！送车位', '大户型！精装修，价格可...'],
						desc: '3室2厅 128m 阳光城檀府'
					},
					{
						totalPrice: '90',
						unitPrice: '8000',
						agency: '元兴 xx房产中介',
						tags: ['大户型', '房东急售！送车位', '大户型！精装修，价格可...'],
						desc: '3室2厅 128m 阳光城檀府'
					},
					{
						totalPrice: '90',
						unitPrice: '8000',
						agency: '元兴 xx房产中介',
						tags: ['大户型', '房东急售！送车位', '大户型！精装修，价格可...'],
						desc: '3室2厅 128m 阳光城檀府'
					},
					{
						totalPrice: '90',
						unitPrice: '8000',
						agency: '元兴 xx房产中介',
						tags: ['大户型', '房东急售！送车位', '大户型！精装修，价格可...'],
						desc: '3室2厅 128m 阳光城檀府'
					}
				],
				items: [{
						title: '房东城卖',
						description: '房东好房城卖',
						backcolor: 'linear-gradient(to right,rgb(255, 228, 203),rgb(255, 241, 228))',
						imageSrc: ''
					},
					{
						title: '特惠装修',
						description: '优质装修，省心装房',
						backcolor: 'linear-gradient(to right,rgb(222, 244, 253),rgb(237, 243, 250))',
						imageSrc: ''
					},
					{
						title: '优质小区',
						description: '优质宜居小区',
						backcolor: 'linear-gradient(to right,rgb(255, 228, 203),rgb(255, 241, 228))',
						imageSrc: ''
					}
				],
				itemWidth: 180,
				itemCount: 0,
				regionList: [],
				pageNumber: 1,
				pageSize: 10,
				hasMore: true,
				imageLoaded: false,
				area: '',
				avgPrice: '',
				sort: '',
				startDate2: '',
				endDate: '',
			};
		},
		created() {
			var address = uni.getStorageSync('address');
			if ("" != address) {
				getAddressItemByCode(address.adcode).then(res => {
					// this.regionList = res.data.data;

					if ("" == uni.getStorageSync('addressData')) {

						uni.setStorageSync('addressData', res.data.data)
						//刷新此页面
						uni.reLaunch({
							url: '/pages/house/oldHouse'
						});
					} else {
						uni.setStorageSync('addressData', res.data.data)

					}
				});
			}

			this.itemCount = this.items.length;
			this.findHouseRoomList();
			this.getAddressCode();
		},
		mounted() {

		},
		methods: {
			// 跳转到租房详情
			navigateToDetailPage(item) {
				this.$u.route({
					url: '/pages/house/detail/detail',
					params: {
						houseId: item.id
					}
				})
				// uni.navigateTo({
				//   url: `/pages/rental/rentalInfo?id=${item.id}&rentalId=${item.rentalId}`,
				// });
			},
			parseImage(images) {

				// 这里可根据实际情况处理图片，示例直接返回
				return JSON.parse(images);
			},
			// 返回上一步
			reback() {
				// 返回上一步
				uni.navigateBack({
					delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面
				});
			},
			onImageLoad() {
				this.imageLoaded = true;
			},
			onImageError(e) {
				console.log('图片加载错误:', e);
			},
			search() {
        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: '/pages/navigation/search/searchHouse?type=4'
          })
        }

			},
			handleConfirm(v, selectedValue) {
				console.log('handleConfirm ==>', v, selectedValue)
			},
			handleClose(v, callbackMenuList) {
				if (v == 0) {
					this.area = callbackMenuList[0].activeTitle;
				} else if (v == 1) {
					this.avgPrice = callbackMenuList[1].activeTitle;
				} else if (v == 2) {
					this.sort = callbackMenuList[2].activeTitle;
				} else if (v == 3) {

					if (null != callbackMenuList[3].value) {
						this.startDate2 = callbackMenuList[3].value.start;
						this.endDate = callbackMenuList[3].value.end
					} else {
						this.startDate2 = null
						this.endDate = null
					}

				}
				this.pageNumber = 1;
				this.hasMore = true;
				this.flowList = []
				this.findHouseRoomList();
				console.log('handleClose ==>', v, callbackMenuList)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
			getAddressCode() {
				var address = uni.getStorageSync("address")
				console.info("------地址-----" + address)

				getAddressItemByCode(address.adcode).then(res => {
					if (res.data.code == 200) {
						this.regionList = res.data.result
					}
				})
			},
			findHouseRoomList() {
				findHouseRoomList({
					state: 2,
					//villageCity: uni.getStorageSync("address").district,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					type: 4,
					isAsc: 'desc',
					area: this.area,
					avgPrice: this.avgPrice,
					sort: this.sort,
					startDate: this.startDate2,
					endDate: this.endDate,
          publicFlag:"true"
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.rows.length < this.pageSize) {
							this.hasMore = false;
						}
						if (this.pageNumber === 1) {
							this.flowList = res.data.rows;
						} else {
							this.flowList = this.flowList.concat(res.data.rows);
						}
					}
				})
			},
			toggleDropdown(index) {
				this.filterList.forEach((item, i) => {
					if (i === index) {
						item.isOpen = !item.isOpen;
					} else {
						item.isOpen = false;
					}
				});
			},
			selectOption(filterIndex, optIndex) {
				const selectedOption = this.filterList[filterIndex].options[optIndex];
				this.filterList[filterIndex].name = selectedOption;
				this.filterList[filterIndex].isOpen = false;
				console.log(`选中筛选条件：${selectedOption}`);
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			onPullDownRefresh() {
				this.pageNumber = 1;
				this.hasMore = true;
				this.findHouseRoomList();
				uni.stopPullDownRefresh();
			},
			onReachBottom() {
				if (this.hasMore) {
					this.pageNumber++;
					this.findHouseRoomList();
				}
			}
		},
		onReachBottom() {
			this.onReachBottom();
		}
	};
</script>

<style lang="scss" scoped>
	.box_top {
		width: auto;
		height: auto;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		background: linear-gradient(to bottom, rgb(204, 224, 255), rgb(245, 245, 245));
		position: sticky;
		top: 0;
		z-index: 20;
		padding-bottom: 20rpx;
		// border-bottom: 2rpx #d9d9d9 solid;
		// box-shadow: 0 0 0 2rpx #d9d9d97a;

		.top_title {
			padding-top: 28rpx;
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.searchbar {
			width: 90%;
			margin: auto;
			margin-top: 24rpx;
			background-color: #FFF;
			display: flex;
			// justify-content: center;
			align-items: center;
			border-radius: 80rpx;
			padding: 0 24rpx;
		}


	}



	.body_list {
		// border: 1px red solid;
		border-radius: 16px 16px 0 0;
		background-color: #FFF;
		// overflow: hidden;
	}

	.build_class {
		// border: 1px red solid;
		padding-bottom: 40rpx;

		.list_box {
			width: 100%;
			height: auto;
			// border: 1px red solid;
			padding: 0 24rpx;
			display: flex;
			align-items: stretch;
			margin-top: 24rpx;

			.box_left {
				// border: 1px red solid;
				position: relative;

				.left_image {
					width: 288rpx;
					height: 224rpx;
					border-radius: 11px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;

					}
				}

				.owner {
					position: absolute;
					// top: 0;
					bottom: 0;
					width: 100%;
					color: #FFF;
					// background-color: #FFF;
					display: flex;
					align-items: center;
					padding: 0 18rpx 12rpx 18rpx;

					.owner_image {
						width: 21px;
						height: 21px;
					}

					.owner_font1 {
						font-size: 26rpx;
						white-space: nowrap;
						margin-left: 8rpx;
					}

					.owner_font2 {
						font-size: 24rpx;
						white-space: nowrap;
						margin-left: 8rpx;
					}
				}


			}

			.box_right {
				margin-left: 16rpx;
				height: auto;
				position: relative;
				// align-self: stretch;

				.right_box1 {
					display: flex;
					align-items: center;
					position: relative;

					.box1_name {
						font-size: 28rpx;
						font-weight: 600;
						text-indent: 120rpx;
					}

					.box1_type {
						width: auto;
						height: auto;
						padding: 2rpx 10rpx;
						font-size: 24rpx;
						// border: 1px #d9d9d9 solid;
						background-color: rgb(255, 53, 40);
						color: #FFF;
						// font-weight: 600;
						position: absolute;
						top: 0;
						left: 0;
						white-space: nowrap;

					}
				}

				.right_box2 {
					position: absolute;
					bottom: 0;
					margin-top: auto;

					.box2_colorfont {
						font-size: 32rpx;
						font-weight: 800;
						// color: rgb(255, 53, 40);
					}
				}

				.right_box3 {
					margin-top: auto;
					position: absolute;
					bottom: 60rpx;

					.box_font {
						font-size: 24rpx;
						font-weight: 600;

					}
				}

				.right_box4 {
					display: flex;
					align-items: center;
					margin-top: 12rpx;


					.box4_list {
						height: auto;
						width: auto;
						background-color: rgb(237, 244, 255);
						color: rgb(88, 107, 144);
						padding: 4rpx 24rpx;
						border-radius: 16rpx;
						font-size: 24rpx;
						font-weight: 600;
						margin-right: 18rpx;
					}
				}
			}
		}
	}

	.container {
		// padding: 20rpx;
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}

	.search-left {
		color: #666;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.search-middle {
		flex: 1;
	}

	.search-middle input {
		width: 100%;
		height: 60rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}

	.search-right {
		width: 60rpx;
		height: 60rpx;
	}

	.function-nav {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.nav-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20rpx 0;
	}

	.nav-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.nav-item text {
		font-size: 28rpx;
		color: #666;
	}

	.scroll-wrapper {
		width: 100%;
		overflow: hidden;
	}

	.scroll-content {
		white-space: nowrap;
		display: inline-flex;
		padding: 32rpx 32rpx 0 32rpx;

		.box_item {
			width: 316rpx;
			height: 224rpx;
			// border: 1px red solid;
			// background: linear-gradient(to right,rgb(255, 228, 203),rgb(255, 241, 228));
			padding: 16rpx;
			display: inline-block;
			margin-right: 32rpx;

			.box_font1 {
				font-size: 32rpx;
				font-weight: 200;
				color: rgb(139, 54, 0);
			}

			.box_font2 {
				font-size: 24rpx;
				font-weight: 600;
				color: rgb(139, 54, 0);
			}

			.box_img2 {
				display: flex;
				align-items: center;
				margin-top: 12rpx;

				.img2_image {
					width: 66px;
					height: 51px;
					margin-right: 20rpx;
				}
			}
		}
	}

	.scroll-item {
		display: inline-block;
		background-color: #fff;
		padding: 15px;
		margin-right: 10px;
		border-radius: 5px;
		background-image: url('/static/nav/bj3.png');
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.image-placeholder {
		width: 100%;
		height: 100px;
		margin-top: 10px;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.filter-container {
		background-color: #ffffff;
		padding: 15rpx;
		margin-bottom: 20rpx;
	}

	.filter-row {
		display: flex;
		gap: 20rpx;
	}

	.filter-item {
		position: relative;
		padding: 10rpx 15rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		min-width: 80rpx;
		text-align: center;
	}

	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #ffffff;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 10rpx 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.dropdown-item {
		padding: 8rpx 15rpx;
		font-size: 26rpx;
		color: #666;
		cursor: pointer;
	}

	.dropdown-item:hover {
		background-color: #f5f5f5;
	}

	.dadropdown-exp {
		padding: 200px 0;
		text-align: center;
	}

	.loading-more {
		text-align: center;
		padding: 10px;
		color: #999;
	}

	.banner {
		width: 100%;
		padding: 0 32rpx;
		// border: 1px red solid;
		margin: 20upx 0;


		.banner_image {
			width: 100%;
			// border: 1px red solid;

			image {
				width: 100%;
				height: 104rpx;
				border-radius: 2vw;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
			}
		}
	}

	.fade-in {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>